<!--
 * @description  固定数量新闻列表
 * @author dumeng
 * @date 2022/11/9
 -->
<template>
  <div
    class="news-list-fixed-page"
    :style="{ 'margin-top': top,'padding-left': paddingLeftRight,'padding-right': paddingLeftRight}"
  >
    <ul>
      <li v-if="isNoData" class="news-nodata">暂无新闻</li>
      <template v-else>
        <li v-for="(item, index) in list" :key="index" class="list-item" @click="toDetail(item)">
          <newsListStyleEight v-if="item.showType=='ZSXS_CWZ'" :item="item" :option="option" />
          <newsListStyleTwo v-else-if="item.showType=='ZSXS_YWYSYS'" :item="item" :option="option" />
          <newsListStyleThree v-else-if="item.showType=='ZSXS_YWZTYS'" :item="item" :option="option" />
          <newsListStyleFour v-else-if="item.showType=='ZSXS_YWZSYS'" :item="item" :option="option" />
          <newsListStyleFive v-else-if="item.showType=='ZSXS_TWHPDTYS'" :item="item" :option="option" />
          <newsListStyleSix v-else-if="item.showType=='ZSXS_TWHPBTYS'" :item="item" :option="option" />
          <newsListStyleSeven
            v-else-if="item.showType=='ZSXS_TWHPDSYS'"
            :item="item"
            :position="index"
            :option="option"
          />
          <newsListStyleOne v-else :item="item" :option="option" />
        </li>
        <li v-show="list && list.length" class="list-more">查看更多</li>
      </template>

    </ul>
  </div>
</template>

<script>

import mixins from '@/components/CustomPage/apps/widget/mixins'
import newsListStyleOne from './newsListStyleOne'
import newsListStyleTwo from './newsListStyleTwo'
import newsListStyleThree from './newsListStyleThree'
import newsListStyleFour from './newsListStyleFour'
import newsListStyleFive from './newsListStyleFive'
import newsListStyleSix from './newsListStyleSix'
import newsListStyleSeven from './newsListStyleSeven'
import newsListStyleEight from './newsListStyleEight'

export default {
  name: 'NewsListFixed',
  components: {
    newsListStyleOne,
    newsListStyleTwo,
    newsListStyleThree,
    newsListStyleFour,
    newsListStyleFive,
    newsListStyleSix,
    newsListStyleSeven,
    newsListStyleEight
  },
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: [],
      active: '',
      isNoData: false,
      defaultList: [
        {
          'id': '1',
          'mainTitle': '新闻标题一',
          'publishTime': '2022-06-16'
        },
        {
          'id': '2',
          'mainTitle': '新闻标题二',
          'publishTime': '2022-06-16'
        },
        {
          'id': '3',
          'mainTitle': '新闻标题三',
          'publishTime': '2022-06-16'
        }
      ],
      id: '',
      newsType: '',
      newsName: '',
      // 分类标题
      classifyName: ''
    }
  },
  async created() {
    if (this.isInitData && this.option.isInit) {
      await this.initData()
    } else {
      this.list = this.defaultList
    }
  },
  methods: {
    setData(result) {
      this.list = result?.newList.data.rows
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/utility/rem.scss';
@import '~@/styles/mixin.scss';

.news-list-fixed-page {
  max-width: rem(750);

  ul {
    background-color: #fff;
    border-radius: rem(16);

    .news-nodata {
      height: rem(200);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      font-size: rem(28);
    }

    .list-item {
      position: relative;

      &:after {
        left: rem(20);
        right: rem(20);
        width: auto;
        height: 1px;
        position: absolute;
        z-index: 0;
        bottom: 0;
        content: '';
        background-image: -webkit-linear-gradient(
                bottom,
                #ececec 50%,
                transparent 0
        );
        background-image: linear-gradient(0deg, #ececec 50%, transparent 0);
      }

      &:last-child::after {
        height: 0;
      }

    }

    .list-more {
      position: relative;
      height: rem(64);
      line-height: rem(64);
      text-align: center;
      font-size: rem(24);
      color: #999;
    }
  }
}
</style>
